<template>
    <div id="footer">
        <ul>
            <router-link tag="li" to="/movie/now">
                <i class="fa fa-film"></i>
                <p>电影</p>
            </router-link>
            <router-link tag="li" to="/cinime">
                <i class="fa fa-square"></i>
                <p>影院</p>
            </router-link>
            <router-link tag="li" to="/mine">
                <i class="fa fa-user-circle"></i>
                <p>我的</p>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    name:'TabBar',
}
</script>
<style scoped>
    #footer{
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0px;
        box-shadow: #999 0 0 10px 0;
        background-color: white;
        text-align: center;
    }
    #footer li{
        margin-top: 7px;
        display: inline-block;
        width: 33%;
    }
    .router-link-active{
        color: #e54847;
    }
</style>